<template>
  <div class="cinema">
    <Navi :title="'影院'" :flexd="true" />
    <div class="nav">
      <div class="tbox">
        <div class="title one-text">{{ params.title }}</div>
        <div class="addr one-text">{{ params.addr }}</div>
        <div class="ka">
          <div class="katext">
            <div class="kanm">折扣卡</div>
            <div class="kat">开卡享优惠</div>
          </div>
          <div class="kaimg">
            <van-icon color="#FFB400" size="28" name="gem" />
          </div>
        </div>
      </div>
    </div>
    <div class="swipe">
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in movies" :key="index">
          <template #title>
            <img class="auto-img aimg" :src="item.img" alt="" />
          </template>
          <div class="nmbox">
            <div class="tebox">
              <div class="nm">{{ item.nm }}</div>
              <div class="fen">{{ item.sc }}<span class="sum">分</span></div>
            </div>
            <div class="jie">{{ item.desc }}</div>
          </div>
          <div class="time">
            <div class="text">{{ params.time.slice(5,10) }}</div>
            <div class="link"></div>
          </div>

          <div class="list">

            <div class="listbox" v-for="(e, i) in plist[index]"
                :key="i">
              <div class="ltime">
                <div class="time1">{{e.tm}}</div>
              </div>
              <div class="type">
                <div class="type1">{{e.lang}}{{e.tp}}</div>
                <div class="type2 one-text">{{e.th}}</div>
              </div>
              <div class="pice">
                <div class="pice1">￥<span class="yuan">{{e.baseSellPrice}}</span></div>
                <div class="pice2">
                  <div class="ka">{{e.vipPriceName}}</div>
                  <div class="zi">{{e.vipPrice}}元起</div>
                </div>
              </div>
              <div class="lbtn">
                <van-button
                size="small"
                round
                type="info"
                color='#F03D37'
                @click="goGoupiao(nm[index],e.dt,e.tm,e.lang+e.tp,e.baseSellPrice,e.th)"
                >购票</van-button>
              </div>
            </div>

            
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Navi from "../components/Navi.vue";
export default {
  name: "Cinema",
  components: {
    Navi,
  },
  data() {
    return {
      params: {
        id: "",
        cityid: "",
        title: "",
        addr: "",
        time: "",
      },
      active: 0,
      movies: [],
      plist: [],
      nm:[]
    };
  },
  created() {
    this.params = this.$route.params;
    this.getData(this.params.id, this.params.cityid);
  },
  methods: {
    getData(id, cityid) {
      this.axios({
        method: "get",
        url:
          "https://apis.netstart.cn/maoyan/cinema/shows?cinemaId=" +
          id +
          "&ci=" +
          cityid +
          "&channelId=4",
      })
        .then((result) => {
          this.$toast("加载成功！");
          
          this.movies = result.data.data.movies;
          this.movies.forEach((v) => {
            
            this.nm.push(v.nm)
            for (let i = 0; i < v.shows.length; i++) {
              this.plist.push(v.shows[i].plist);
            }
          });
          
        })
        .catch((err) => {
          
        });
    },
    goGoupiao(title,dt,tm,lang,price,th){
      this.$router.push({ name: "XuanWei",params:{title,dt,tm,lang,price,th} });
    }
  },
};
</script>

<style lang="less" scoped>
/deep/.van-tab__text {
  width: 100px;
  height: 150px;
}

/deep/.van-tabs__wrap {
  // width: 100px;
  height: 170px;
}
/deep/.van-tabs__nav {
  background-color: #fff7eb;
  padding: 0px 35% 15px 35%;
  overflow-x: scroll;
}

/deep/.van-tab {
  padding: 0 8px;
}

/deep/.van-tabs__line {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #fff;
  background-color: #fff7eb;
}

.swipe {
  .aimg {
    width: 100px;
    height: 150px;
  }
  .nmbox {
    width: 100%;
    text-align: center;
    .tebox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 8px;
      .nm {
        font-size: 18px;
      }
      .fen {
        font-size: 18px;
        color: #ffb400;
        line-height: 30px;
        margin-left: 8px;
      }
      .sum {
        font-size: 13px;
      }
    }
    .jie {
      font-size: 15px;
      margin-bottom: 10px;
      color: #999;
    }
  }
  .time {
    width: 100%;
    height: 50px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    line-height: 50px;
    .text {
      font-size: 16px;
      color: #666;
      margin-left: 5px;
    }
    .link {
      width: 30px;
      height: 2px;
      background-color: #ca180e;
      margin-left: 10px;
    }
  }
  .list {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    .listbox {
      width: 100%;
      border-bottom: 1px solid #999;
      display: flex;
      padding: 10px 0;
      .ltime {
        .time1 {
          font-size: 20px;
          margin-top: 10px;
        }
      }
      .type{
          margin-left: 20px;
          .type1 {
          font-size: 15px;
        }
        .type2 {
          width: 100px;
          font-size: 13px;
          color: #999;
        }
      }
      .pice{
          margin-left: 20px;
          .pice1{
              font-size: 14px;
              color: #ca180e;
          }
          .yuan{
              font-size: 17px;
          }
          .pice2{
              display: flex;
              border: 2px solid #ffb400;
              .ka{
                  width: 38px;
                  font-size: 12px;
                  color: #fff;
                  background-color: #ffb400;
                  padding: 1px 2px;
                  text-align: center;
              }
              .zi{
                   width: 38px;
                  font-size: 12px;
                  color: #ffb400;
                  padding: 1px 2px;
                  text-align: center;
                  line-height: 18px;
              }
          }
      }
      .lbtn{
          margin-left: 30px;
          margin-top: 5px;
      }
      
    }
    .listbox:last-child{
        border: 0;
    }
  }
}

.nav {
  width: 100%;
  .tbox {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    .title {
      width: 80%;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .addr {
      width: 80%;
      font-size: 12px;
      color: #999;
    }
    .ka {
      width: 45%;
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;
      border: 1px solid #ffb400;
      border-radius: 5px;
      background-color: #fff7eb;
      margin-top: 10px;
      .katext {
        width: 50%;
        .kanm {
          font-size: 16px;
          color: #ffb400;
        }
        .kat {
          font-size: 12px;
          color: #ffb400;
        }
      }
      .kaimg {
        margin-top: 5px;
      }
    }
  }
}
</style>